<template>
	<!-- 我的订单 -->
	<view class="content">
		<view class="tabs_box">
			<u-tabs
				:list="tabsList"
				:activeStyle="{
					color: '#00ABA9',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				@click="tabsEvent"
			/>
		</view>
		
		<view class="content_module">
			<view class="data_item" v-for="(item,index) in dataList" :key="index">
				<view class="module1">
					<view class="left">
						订单号
						<text>{{item.ddh}}</text>
					</view>
					<view class="right" :class="
						item.yyzt === '1' ? 'yyzt1' :
						item.yyzt === '2' ? 'yyzt2' : 
						item.yyzt === '3' ? 'yyzt3' : 
						item.yyzt === '4' ? 'yyzt4' : 
						item.yyzt === '5' ? 'yyzt5' : ''
					">
						{{
							item.yyzt === '1' ? '待支付' : 
							item.yyzt === '2' ? '待寄件' : 
							item.yyzt === '3' ? '运输中' : 
							item.yyzt === '4' ? '已完成' : 
							item.yyzt === '5' ? '已取消' : ''
						}}
					</view>
				</view>
				<view class="module2">
					<view class="left">
						<view>
							<text>寄</text>
							<text>{{item.jiname}}</text>
							<text>{{item.jisjh}}</text>
						</view>
						<view>
							<text>收</text>
							<text>{{item.shoname}}</text>
							<text>{{item.shosjh}}</text>
						</view>
					</view>
					<image class="right" :src="imgUrl + item.url" mode=""></image>
				</view>
				<view class="module3">
					<view class="left">
						<view>重量：{{item.zhongliang}}</view>
						<view>重量：{{item.xdsj}}</view>
					</view>
					<view class="right">
						<view>运费</view>
						<view>￥{{item.yunfei}}</view>
					</view>
				</view>
				<view class="module4">
					<view class="cdzt">
						
					</view>
					<view class="caozuo">
						<view class="button loukong" v-if="item.yyzt === '1' || item.yyzt === '2'">取消订单</view>
						<view class="button loukong" v-if="item.yyzt === '5'">重新下单</view>
						<view class="button shiti" v-if="item.yyzt === '1' || item.yyzt === '2' || item.yyzt === '3' || item.yyzt === '4' || item.yyzt === '5'">查看详情</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsList: [
					{
						name: "全部"
					},
					{
						name: "待支付"
					},
					{
						name: "待寄件"
					},
					{
						name: "运输中"
					},
					{
						name: "已完成"
					},
					{
						name: "已取消"
					}
				],
				dataList: [
					{
						ddh: "YZ202305151234",
						yyzt: "1", //1待支付 2待寄件 3运输中 4已完成 5已取消
						jiname: "张伟",
						jisjh: "134****5678",
						shoname: "李娜",
						shosjh: "153****5974",
						url: "/static/image/my/shangpin.png",
						zhongliang: "1.2",
						xdsj: "2025-09-15 09:00",
						yunfei: "15.00"
					},
					{
						ddh: "YZ202305151234",
						yyzt: "2", //1待支付 2待寄件 3运输中 4已完成 5已取消
						jiname: "张伟",
						jisjh: "134****5678",
						shoname: "李娜",
						shosjh: "153****5974",
						url: "/static/image/my/shangpin.png",
						zhongliang: "1.2",
						xdsj: "2025-09-15 09:00",
						yunfei: "15.00"
					},
					{
						ddh: "YZ202305151234",
						yyzt: "3", //1待支付 2待寄件 3运输中 4已完成 5已取消
						jiname: "张伟",
						jisjh: "134****5678",
						shoname: "李娜",
						shosjh: "153****5974",
						url: "/static/image/my/shangpin.png",
						zhongliang: "1.2",
						xdsj: "2025-09-15 09:00",
						yunfei: "15.00"
					},
					{
						ddh: "YZ202305151234",
						yyzt: "4", //1待支付 2待寄件 3运输中 4已完成 5已取消
						jiname: "张伟",
						jisjh: "134****5678",
						shoname: "李娜",
						shosjh: "153****5974",
						url: "/static/image/my/shangpin.png",
						zhongliang: "1.2",
						xdsj: "2025-09-15 09:00",
						yunfei: "15.00"
					},
					{
						ddh: "YZ202305151234",
						yyzt: "5", //1待支付 2待寄件 3运输中 4已完成 5已取消
						jiname: "张伟",
						jisjh: "134****5678",
						shoname: "李娜",
						shosjh: "153****5974",
						url: "/static/image/my/shangpin.png",
						zhongliang: "1.2",
						xdsj: "2025-09-15 09:00",
						yunfei: "15.00"
					}
				]
			}
		},
		computed:{
			imgUrl(){
				return this.$imgUrl
			}
		},
		onLoad() {

		},
		mounted() {
			
		},
		
		methods: {
			tabsEvent(item) {
				console.log('item', item);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		
	}
	.tabs_box {
		background-color: #FFFFFF;
	}
	::v-deep .u-tabs__wrapper__nav__line {
		background: #28AAA9 !important;
	}
	.content_module {
		background-color: #F4F4F4;
		padding: 30rpx;
		>.data_item {
			background-color: #FFFFFF;
			border-radius: 15rpx;
			margin-bottom: 30rpx;
			>view {
				border-bottom: 1px solid #E5E7EB;
				padding: 30rpx;
				&:last-child {
					border: 0;
				}
			}
			>.module1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				>.left {
					>text {
						padding-left: 10rpx;
					}
				}
				>.right {
					padding: 15rpx 25rpx;
					border-radius: 25rpx;
					/*  字体粗细：normal 默认 、bold 粗体 、bolder 比粗体更加粗 、lighter 比正常字体细 */
					font-weight: bolder; 
					font-size: 25rpx;
				}
				>.yyzt1 {
					color: #00ABA9;
					background-color: #ECFFFB;
				}
				>.yyzt2 {
					color: #1E40AF;
					background-color: #DBEAFE;
				}
				>.yyzt3 {
					color: #FF9901;
					background-color: #FFF7E6;
				}
				>.yyzt4 {
					color: #37AFFF;
					background-color: #ECFCFF;
				}
				>.yyzt5 {
					color: #F43838;
					background-color: #FFF3F3;
				}
			}
			>.module2 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				>.left {
					>view {
						&:nth-child(1) {
							margin-bottom: 20rpx;
						}
						>text:nth-child(1) {
							color: #6B7280;
							font-size: 24rpx;
						}
						>text:nth-child(2) {
							padding: 0 30rpx 0 20rpx;
						}
					}
				}
				>.right {
					width: 120rpx;
					height: 120rpx;
				}
			}
			>.module3 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #6B7280;
				>.left {
					>view:nth-child(1) {
						margin-bottom: 15rpx;
					}
				}
				>.right {
					>view:nth-child(1) {
						margin-bottom: 15rpx;
						text-align: right;
					}
					>view:nth-child(2) {
						color: #00ABA9;
						/* 字体大小 */
						font-size: 30rpx; 
						/* 字体 */
						font-family: "微软雅黑","Microsoft YaHei"; 
						/*  字体粗细：normal 默认 、bold 粗体 、bolder 比粗体更加粗 、lighter 比正常字体细 */
						font-weight: bolder; 
					}
				}
			}
			>.module4 {
				border-top: 1px solid #E5E7EB;
				padding-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				>.cdzt {
					color: #6B7280;
				}
				>.caozuo {
					display: flex;
					>.loukong {
						margin-left: 15rpx;
						padding: 20rpx 40rpx;
						border-radius: 10rpx;
						color: #00ABA9;
						background-color: #FFFFFF;
						border: 1px solid #00ABA9;
					}
					>.shiti {
						margin-left: 15rpx;
						padding: 20rpx 40rpx;
						border-radius: 10rpx;
						color: #FFFFFF;
						background-color: #00ABA9;
					}
				}
			}
		}
	}
</style>